import * as React from 'react';
import { forwardRef } from 'react';
import StaffMonitor from '../staff-monitor/staff-monitor';
import TrackView from '../track-view/track-view';
import './index.scss';

export interface StaffManagementLeftProps {
  className?: string;
  style?: React.CSSProperties;
  width?: number | string;
  height?: number | string;
  /**
   * 是否禁用响应式缩放
   */
  noResponsiveScale?: boolean;
  /**
   * 组件ID
   */
  componentId?: string;
  
  // StaffMonitor 组件的属性
  staffMonitor?: {
    title?: string;
    englishTitle?: string;
    staffStats?: any[];
    offDutyRecords?: any[];
    offDutyStats?: any[];
    onClick?: (event: any) => void;
    style?: React.CSSProperties;
    className?: string;
  };
  
  // TrackView 组件的属性
  trackView?: {
    title?: string;
    englishTitle?: string;
    searchPlaceholder?: string;
    trackRecords?: any[];
    onSearch?: (value: string) => void;
    onTrackClick?: (record: any) => void;
    onClick?: (event: any) => void;
    style?: React.CSSProperties;
    className?: string;
  };

  __designMode?: boolean;
}

const StaffManagementLeft = forwardRef<HTMLDivElement, StaffManagementLeftProps>(({
  className = '',
  style = {},
  width = 500,
  height = 1075,
  noResponsiveScale = true,
  componentId,
  staffMonitor = {},
  trackView = {},
  __designMode,
  ...otherProps
}, ref) => {
  const combinedClassName = `staff-management-left ${className}`.trim();
  const customStyle: React.CSSProperties = { 
    ...style,
    width: typeof width === 'number' ? `${width}px` : width,
    height: typeof height === 'number' ? `${height}px` : height,
  };

  // 构建类名，包含响应式缩放控制
  const finalClassName = [
    combinedClassName,
    noResponsiveScale ? 'no-responsive-scale' : ''
  ].filter(Boolean).join(' ');

  return (
    <div 
      ref={ref} 
      className={finalClassName} 
      style={customStyle}
      id={componentId}
      {...otherProps}
    >
      {/* 上半部分：员工监管组件 */}
      <div className="staff-management-left__staff-monitor">
        <StaffMonitor
          title={staffMonitor.title || "在岗监管"}
          englishTitle={staffMonitor.englishTitle || "Online supervision"}
          staffStats={staffMonitor.staffStats}
          offDutyRecords={staffMonitor.offDutyRecords}
          offDutyStats={staffMonitor.offDutyStats}
          onClick={staffMonitor.onClick}
        />
      </div>

      {/* 下半部分：轨迹查看组件 */}
      <div className="staff-management-left__track-view">
        <TrackView
          title={trackView.title || "轨迹查看"}
          englishTitle={trackView.englishTitle || "Track View"}
          searchPlaceholder={trackView.searchPlaceholder || "请输入员工名字"}
          trackRecords={trackView.trackRecords}
          onSearch={trackView.onSearch}
          onTrackClick={trackView.onTrackClick}
          onClick={trackView.onClick}
        />
      </div>
    </div>
  );
});

export default StaffManagementLeft;
